<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
    var table = document.createElement('table');
    table.border = '1px';
    var tr = document.createElement('tr');
    var td = document.createElement('td');
    td.innerHTML = '这是表格';
    tr.appendChild(td);
    table.appendChild(tr);
    document.body.appendChild(table);

    function cTag(tag) {
        return document.createElement(tag);

    }
    var table2 = cTag('table');
    table.border='1px';
    var tr2 = cTag('tr');
    var td2 = cTag('td');
    td2.innerHTML = '这是表格二';
    tr2.appendChild(td2);
    table2.appendChild(tr2);
    document.body.appendChild(table2);

    function creatTag(tag) {
        this.DOM = document.createElement(tag);
        this.border = function (bor) {
            this.DOM.border = bor;
        }
        this.addChid = function (child) {
            this.DOM.innerText = text;
        }
        this.styles = function (sty){
            for(var k in sty) {
                this.DOM.styles[k] = sty[k];
            }
        }
    }
    var table3 = new creatTag('table');
    table3.border('1px');

    var tr3 = new CreatTag('tr');
    var td3 = new CreatTag('td');
    td3.text('这是表格三');

    tr3.addChid(td3.DOM);
    table3.addChid(tr3.DOM);

    document.body.appendChild(table3.DOM);

    var div = new CreatTag('div');
    div.text('这是一个div');
    div.styles({
        width:'100px',
        height:'200px',
        backgroundColor:'skyblue'
    })
    document.body.appendChild(div.DOM);

    var p = new CreatTag('p');
    p.styles({
        width:'300px',
        height:'100px',
        backgroundColor:'pink'
    })
    document.body.appendChild(p.DOM);
    </script>
</body>
</html>